<template>
	<view class="container">

	<z-paging ref="paging" v-model="dataList" @query="queryList">
	<template #top>
		<u-calendar :show="showStartDate" mode="single" rowHeight="90" @close="showStartDate = false" 
		   closeOnClickOverlay @confirm="confirmStart" :minDate="minDate"
			   monthNum="20"
			 :maxDate="maxDate"></u-calendar>
		<u-button @click="showStartDate = true">{{ params.start_time || '开始日期' }}</u-button>
		
		<u-calendar :show="showEndDate" mode="single" rowHeight="90" @close="showEndDate = false"
		   closeOnClickOverlay @confirm="confirmEnd" :minDate="minDate" monthNum="20"
			 :maxDate="maxDate"></u-calendar>
		<u-button @click="handerEnd">{{params.end_time || '结束日期' }}</u-button>
	
		
	</template>
	<view class="box-card">
		<view class="box-card-item" v-for="(item, index) of dataList" :key="index">
			<view class="box-card-item-left">
				<view class="box-card-item-left-title">门店负责人: {{ item.head_name }} </view>
				<view class="box-card-item-left-text">
					门店电话: {{ item.phone }}
				</view>
				<view class="box-card-item-left-text">
					设备组: {{ item.device_id }}
				</view>
				<view class="box-card-item-left-text">
					门店地址: {{ item.address  || '-' }}
				</view>
				<view class="box-card-item-left-text">
					当日开机时间: {{ item.readable_start_time || '-' }}
				</view>
				<view class="box-card-item-left-text">
					当日结束时间: {{ item.readable_end_time || '-' }}
				</view>
			</view>
			<view class="box-card-item-right">
				<!-- <u-icon name="arrow-right" size="24"></u-icon> -->
			</view>
		</view>
	</view>
	</z-paging>
	</view>
</template>

<script>
  import request from "@/api/request.js"
  import dayJS from 'dayjs'
  export default {
    data(){
	  return {
		dataList: [],
		showStartDate: false,
		showEndDate: false,
		minDate:'',
		maxDate: '',
		params: {
		  page: 1,
		  page_size: 10,
		  start_time: "",
		  end_time: '',
		  device_id: '',
		  token: ''
		}
	  }
	},
	onLoad(options) {
	  this.params.token = uni.getStorageSync('token');
	   this.params.device_id = options.device
	   this.maxDate = dayJS().format('YYYY-MM-DD')
	   this.minDate = dayJS().add(-18, 'month').format('YYYY-MM')
	},
	methods: {
		confirmStart(val){
		  this.params.start_time = val.toString()
		  this.showStartDate = false
		},
		confirmEnd(val){
			this.params.end_time = val.toString()
			this.showEndDate = false
			this.$refs.paging.reload()
		},
		handerEnd(){
		  if(!this.params.start_time){
			uni.$u.toast('请选择开始时间')
			return
		  }	
		   this.showEndDate = true
		},
	  queryList(page, page_size){
		this.params.page = page
		this.page_size = page_size
		const that = this
		uni.showLoading({
			title: '加载中...'
		})
		request({
		  url: '/kx/StoreManagement/storeStartupRecord',
		  method: 'POST',
		  data: {
			  ...that.params
		  },
		  successCb: (res) => {
			uni.hideLoading()
			that.$refs.paging.complete(res.data.data);
		  },
		  failCb: () => {
			uni.hideLoading()
			that.$refs.paging.complete(false);  
		  }
		})  
	  }	
	}
  }
</script>

<style lang="scss" scoped>
	.comm-img {
	 width: 28rpx;
	 height: 22rpx;
	 object-fit: cover;	
	}
	.comm-text {
	  font-size: 24rpx;
	  color: #6D6D6D;
	  margin: 0 10rpx;  
	}
	.comm-count {
	  font-weight: 700;
	  font-size: 36rpx;
	  color: #3D3D3D;	
	}
.container{
  background: #F3F3F3;
  width: 100%;
  min-height: 98vh;
  padding-top: 2rpx;
	.box-card {
		margin: 24rpx 0;
		&-item {
		@include layout(stretch, center);
		 width: 680rpx;
		 // height: 120rpx;
		 background: $uni-bg-color;
		 margin: 12rpx auto;
		 padding: 20rpx 0;
		 border-radius: 20rpx;
		 &-left {
			 flex: 1;
			 &-title {
			 padding: 0 24rpx;
			 line-height: 1.5;
			 font-weight: 700;
			 font-size: 24rpx;
			 }
			 &-text {
		margin-left: 20rpx;
		font-size: 24rpx;
		line-height: 1.5;
			 }
			 &-addr {
			   @include layout(stretch, center);
			   padding: 20rpx;
			   image {
			    width: 24rpx;
			    height: 26rpx;
			    object-fit: cover;
				margin-right: 12rpx;
				flex-shrink: 0;
			   } 
			   view {
				font-size: 24rpx;
				line-height: 1.5;
				color: #6D6D6D;   
			   }
			 }
		 }
		 &-right {
		   margin-right: 24rpx;
		 }
		}
	}
	}
</style>